<template>
  <div class="active-content">
    <el-row>
      <el-col :span="24">
        <div class="vip-desc">
          <div class="userName">尊敬的{{sysUserName}}</div>
          <div class="content">，请选择<span class="vip_text"> 体验卡 </span>服务</div>
        </div>
      </el-col>
      <!--支付套餐-->
      <el-col :span="24">
        <div class="vip-package">
          <div v-for="(item, i) in vipInfo" :class="[vip_on == item.vipId?'vip-p vip-on':'vip-p']" :data-vip='item.vipId' :data-price='item.vipPrice' @click="chooseVip($event)">
            <div class="price-info">
              <div class="price">{{item.vipPrice}}</div>
              <div class="price-unit">元/月</div>
            </div>
            <div class="package-name">
              {{item.vipname}}
            </div>
            <i class="el-icon-my-vip-choose" :class="[vip_on == item.vipId?'':'icon-hide']" style=""></i>
          </div>
        </div>
      </el-col>
      <!--应付金额-->
      <el-col :span="24">
        <div class="pay-info">
          <span>应付金额：</span>
          <span class="pay-price">{{payPrice}}</span>
          <span>元</span>
        </div>
      </el-col>
      <!--支付二维码-->
      <el-col :span="24">
        <div class="qr-code">
          <div class="qr-code-info">
            <div class="qr-code-bor">
              <div class="qr-code-img">
                <img :src="wechat">
              </div>
            </div>
            <div class="qr-code-text">微信支付</div>
          </div>
          <div class="qr-code-info">
            <div class="qr-code-bor">
              <div class="qr-code-img">
                <img :src="ali">
              </div>
            </div>
            <div class="qr-code-text">支付宝支付</div>
          </div>
        </div>
      </el-col>
      <!--vip套餐功能说明-->
      <el-col :span="24">
        <div class="vip-desc pay-vip-desc">
          <span class="vip-desc-sp1">VIP 体验:</span>
          <span class="vip-desc-sp2"><i class="el-icon-my-vip-desc"></i>批量导出</span>
          <span class="vip-desc-sp2"><i class="el-icon-my-vip-desc"></i>合并打印</span>
          <span class="vip-desc-sp2"><i class="el-icon-my-vip-desc"></i>邮件筛选</span>
          <span class="vip-desc-sp2"><i class="el-icon-my-vip-desc"></i>智能分类</span>
        </div>
      </el-col>
      <!--套餐购买说明-->
      <el-col :span="24">
        <div class="vip_explain">
          <span class="vip-desc-sp1">说明:</span>
          <div v-for="(item, i) in explainInfo" style="display: inline-block;">
            <span class="vip-desc-sp2">{{i+1}}.{{item.baseName}}</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as commonApi from "api/common";
  import {websockUrl} from 'config/index.js'

  export default {
    data() {
      return {
        websockUrl: websockUrl, //websock地址
        sysUserName: '',
        userId: '',
        userType: '',
        wechat: null,
        ali: null,
        vip_on: '1',
        explainInfo: [],
        vipInfo: [
          // {
          //   vipId: '1',
          //   vipname: '连续包月',
          //   vipPrice: '25',
          //   vipRemke: '新用户首月30元'
          // },{
          //   vipId: '2',
          //   vipname: '连续包季',
          //   vipPrice: '99',
          //   vipRemke: '折合 ￥33/月'
          // },{
          //   vipId: '3',
          //   vipname: '连续包年',
          //   vipPrice: '255',
          //   vipRemke: '折合 ￥33/月'
          // }
        ],
        payPrice: '0',
      };
    },
    created() {
      var user = sessionStorage.getItem("user");
      user = JSON.parse(user);
      this.websockUrl = this.websockUrl + "/PC_" + user.userId
      this.sysUserName = user.name || "";
      this.userId = user.userId || "";

      this.findUserInfo(1, user);
      this.getVipInfo(1)
      this.initWebSocket()
    },
    mounted() {

    },
    destroyed() {
      this.findUserInfo(2);
      this.websock.close() //离开路由之后断开websocket连接
      console.log('----------singlePay destroyed-------------')
    },
    methods: {
      chooseVip(e){ //选择vip套餐
        this.vip_on = e.currentTarget.dataset.vip
        this.payPrice = e.currentTarget.dataset.price
        this.getPayImg(1)
      },
      getPayImg(type){ //获取支付二维码
        this.wechat = null
        this.ali = null
        if (this.userType === '1'){
          commonApi.getPayImage(this.userId, this.vip_on, type).then(res => {
            let {data} = res
            if (data.status === 200){
              if (data.data != null && data.data != ''){
                this.wechat = data.data.wxPay
                this.ali = data.data.aliPay
              }
            }
          })
        }
      },
      findUserInfo(type, user){
        if (type === 1) { //初始化用户信息
          commonApi.findUser(user.userId).then(res => {
            let {data} = res
            if (data.status === 200){
              this.userType = data.data.user.userType
              this.getPayImg(1)
            }
          })
        } else { //离开时更新用户信息
          user = sessionStorage.getItem("user");
          user = JSON.parse(user);
          commonApi.findUser(user.userId).then(res => {
            let {data} = res
            if (data.status === 200){
              sessionStorage.setItem("user", JSON.stringify(data.data.user)); // session存储用户信息
              sessionStorage.setItem("mailbox", JSON.stringify(data.data.mailbox)); // session存储邮箱信息
            }
          })
        }
      },
      getVipInfo(type){ // 获取单次购买套餐信息
        commonApi.getVipInfo(type).then(res => {
          let {data} = res
          if (data.status === 200){
            if (data.data != null && data.data != ''){
              let vip = data.data.vipInfo
              this.vipInfo = vip
              if (vip.length > 0){
                this.payPrice = vip[0].vipPrice
              }
              this.explainInfo = data.data.explainInfo
            }
          }
        })
      },
      initWebSocket(){ //初始化weosocket
        const wsuri = this.websockUrl
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        // let actions = {"test":"12345"};
        // this.websocketsend(JSON.stringify(actions));
        console.log("连接成功。。。。。")
      },
      websocketonerror(){//连接建立失败重连
        // this.initWebSocket();
        console.log('连接建立失败');
      },
      websocketonmessage(e){ //数据接收
        // console.log("接收到数据："+e.data)
        let res = e.data
        if (res == '1'){ //支付成功
          this.$confirm("是否去获取发票?", "支付成功", {
          }).then(() => {
            this.$router.push("/invoice/invoiceList")
          }).catch(() => {
            this.$emit('reload','zero-succ');
          });
        }
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        console.log('断开连接。。。。。');
        this.$emit('reload','zero');
      },
    },
  };
</script>

<style scoped lang="scss">
  @import "../../assets/css/them";

    .vip-desc{
      margin: 10px 12px;
      color: #333333;
      font-size: 14px;
      font-weight: 600;
      .userName{
        display: inline-block;
      }
      .content{
        display: inline-block;
        .vip_text{
          color: #3B83FC;
        }
      }
    }
    .vip-package{
      margin: 20px 0;
      text-align: center;
      .vip-p.vip-on{
        border: 1px solid #FF5600;
      }
      .vip-p{
        width: 180px;
        border:1px solid rgba(229,229,229,1);
        box-shadow:0px 2px 4px 0px rgba(21,21,21,0.1);
        border-radius:3px;
        display: inline-block;
        margin: 10px 40px;
        .price-info{
          margin: 0 20px;
          border-bottom: 1px solid #E5E5E5;
          padding: 10px 0;
          .price{display: inline-block;padding: 0 5px 0 20px;color: #FF5600;font-size: 24px;font-weight: 600}
          .price-unit{display: inline-block;padding-right:20px;color: #999999;font-weight: 400;font-size: 10px;}
        }
        .package-name{
          color: #333333;
          font-size: 10px;
          font-weight: 600;
          padding: 10px 10px 0 10px;
        }
        .el-icon-my-vip-choose{
          position: relative;
          left: 89px;
          top: 6px;
          width: 20px;
          background: url("../../assets/img/choose@2x.png") center no-repeat;
          background-size: 20px;
          line-height: 2;
          margin-right: 16px;
        }
        .el-icon-my-vip-choose.icon-hide{
          visibility: hidden;
        }
        .el-icon-my-vip-choose:before {
          content: "替";
          visibility: hidden;
        }
      }
    }
    .pay-info{
      text-align: center;
      .pay-price{
        color: #FF5600;
        font-weight: bold;
        font-size: 14px;
      }
    }
    .qr-code{
      margin: 50px;
      text-align: center;
      .qr-code-info{
        margin: 10px 60px;
        display: inline-block;
        .qr-code-bor{
          width: 150px;
          height: 150px;
          border: 1px solid #80C95A;
          .qr-code-img{
            padding: 10px;
            img{
              width: 100%;
            }
          }
        }
        .qr-code-text{
          font-size: 14px;
          font-weight: 600;
          padding-top: 15px;
        }
      }
    }
    .pay-vip-desc{
      background: #F7F7FA;
      padding-top: 10px;
      padding-bottom: 10px;
      .vip-desc-sp1{
        margin-left: 30px;
      }
      .vip-desc-sp2 {
        font-weight: 400;
        font-size: 12px;
        color: #333333;
        margin-left: 50px;
        .el-icon-my-vip-desc{
          width: 20px;
          background: url("../../assets/img/dagou@2x.png") center no-repeat;
          background-size: 14px;
          line-height: 2;
          margin-right: 10px;
        }
        .el-icon-my-vip-desc:before {
          content: "替";
          visibility: hidden;
        }
      }
    }
    .vip_explain{
      padding: 10px 12px;
      color: #333333;
      font-size: 14px;
      font-weight: 600;
      background: $baseBgColor;
      .vip-desc-sp1{
        margin-left: 30px;
      }
      .vip-desc-sp2 {
        font-weight: 400;
        font-size: 12px;
        color: #333333;
        margin-left: 20px;
      }
    }
</style>
